<template>
    <div class="e-table">
        <COMTopStep :stepInfo="steps" />
        <div class="top">
            <div class="left">
                <div>
                    <el-button @click="openAddDialog" size="small" class="btn-greenYellow">
                        新增招标</el-button
                    >
                </div>
                <!-- <div>进入批量管理</div> -->
            </div>
            <div class="right">
                <div class="right-div1">
                    <el-input
                        placeholder="招标编号、拟招标名称、申请机构"
                        size="small"
                        v-model="fuzzySearchStr"
                        @keyup.enter.native="tenderApplyListByEntity({ key: fuzzySearchStr })"
                    >
                        <i
                            slot="suffix"
                            class="el-icon-search"
                            @click="tenderApplyListByEntity({ key: fuzzySearchStr })"
                            style="cursor: pointer"
                        ></i>
                    </el-input>
                </div>
                <div>
                    <el-button class="btn-blue" size="small" @click="onAdvanceSearch"
                        >高级搜索
                    </el-button>
                </div>
            </div>
        </div>
        <!-- v-if让操作列不闪烁，获取到最后一行按钮状态再显示 -->
        <!-- v-if="
                tableData[tableData.length - 1].buttonState &&
                Object.keys(tableData[tableData.length - 1].buttonState) !== 0
            " -->
        <el-table
            :data="tableData"
            border
            :cell-class-name="cellClsNm"
            @cell-click="cellClick"
            @cell-mouse-enter="cellMouseEnter"
            @cell-mouse-leave="cellMouseLeave"
            :max-height="$store.state.tableHeight"
            ref="table"
            v-sortTable="{ tableData: tableData, _this: this, ref: 'table' }"
            :height="tableHeight"
            v-if="
                (tableData.length !== 0 &&
                    tableData[tableData.length - 1].buttonState &&
                    Object.keys(tableData[tableData.length - 1].buttonState) !== 0) ||
                pagination.noData === true
            "
        >
            <el-table-column
                label="操作"
                fixed
                class-name="blue-column operation"
                v-if="buttonsState && false"
                width="100"
            >
                <template slot-scope="{ row }">
                    <ComListButtonState :row="row" v-if="row.buttonState" />
                </template>
            </el-table-column>
            <el-table-column
                show-overflow-tooltip
                prop="billNo"
                label="招标编号"
                width="220"
                class-name="blue-column"
                fixed
            >
            </el-table-column>
            <el-table-column
                show-overflow-tooltip
                prop="tenderName"
                label="拟招标项目名称"
                min-width="200"
                class-name="blue-column"
            >
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="tenderUser" label="招标人" width="230">
            </el-table-column>
            <el-table-column
                show-overflow-tooltip
                prop="tenderForm"
                label="招标方式"
                :formatter="formatter"
                width="150"
            >
            </el-table-column>
            <el-table-column
                show-overflow-tooltip
                prop="tenderType"
                label="招标类型"
                :formatter="formatter"
                width="150"
            >
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="applyTime" label="申请日期" width="110">
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="applyOrgName" label="申请机构" min-width="230">
            </el-table-column>
            <el-table-column
                show-overflow-tooltip
                prop="tenderState"
                label="招标状态"
                :formatter="formatter"
                width="150"
            >
                <template slot-scope="{ row, $index }">
                    <ToolHistory
                        :key="$index"
                        url="/tender/audit/getAuditHistory"
                        :billId="row.billId"
                        :billType="6021"
                    >
                        <span v-status="row.state">{{
                            row.state == 5
                                ? '已作废'
                                : that.options.tenderState.find((item, index) => {
                                      return row.tenderState === index
                                  })
                        }}</span>
                    </ToolHistory>
                </template>
            </el-table-column>
            <!-- <el-table-column show-overflow-tooltip prop="f2" label="发布状态" >
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="f3" label="发布时间" >
            </el-table-column> -->
        </el-table>
        <ComPagination
            :total="pagination.total"
            :pageSize.sync="pagination.pageSize"
            :currentPage.sync="pagination.currentPage"
            @currentChange="tenderApplyListByEntity"
            @sizeChange="tenderApplyListByEntity"
            class="bottomSetting"
        />
        <!-- mask -->
        <el-dialog title="高级搜索" :visible.sync="dialogVisibleSearch" width="40%" :modal="false">
            <div class="item">
                <span>机构</span>
                <el-input v-model="input1" placeholder="请输入内容" size="mini"></el-input>
            </div>
            <div class="item">
                <span>计划日期</span>
                <el-date-picker v-model="value1" size="mini"> </el-date-picker>
                <span class="separate">—</span>
                <el-date-picker arrow-control v-model="value2" size="mini"> </el-date-picker>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" class="btn-greenYellow">重置</el-button>
                <el-button size="mini" class="btn-blue">确定</el-button>
            </span>
        </el-dialog>
        <!-- <ComMaskAdd ref="ComMaskAdd" @refreshTable="tenderApplyListByEntity" /> -->
    </div>
</template>

<script>
import applyRequest from '@/api/tender/apply.js'
// import auditRequest from '@/api/tender/audit.js'
import ComListButtonState from '@/pages/bidding/common/listButtonState.vue'
import ComPagination from '@/components/pagination/pagination.vue'
import COMTopStep from '@/components/topstep/topstep.vue'
// import orgRequest from '@/api/hr/org.js'
// import ComMaskAdd from './mask/add'
import { mapState, mapMutations } from 'vuex'
// eslint-disable-next-line no-unused-vars
import { vueDom, debounce, advanceSearch, openAppClient } from '@/utils/common.js'

export default {
    data () {
        return {
            // 主页
            input1: '',
            // mask搜索
            value1: '',
            value2: '',
            dialogVisibleSearch: false,
            MouseEnterId: 0,
            tableData: [],
            pagination: {
                total: 0,
                pageSize: 20,
                currentPage: 1
            },
            iconActiveColor: {
                id: '',
                type: ''
            },
            bottomSetting: true,
            tableHeight: 0,
            fn: null,
            steps: [
                { description: '招标申请' },
                { description: '招标调整' },
                { description: '评价结果登记' },
                { description: '招标结果公示' },
                { description: '中标通知书' }
            ],
            buttonsState: false,
            fuzzySearchStr: '',
            that: this
        }
    },
    computed: {
        ...mapState({
            options: state => state.biddingApplication.dictionaries
        })
    },
    watch: {
        // pagination: {
        //     handler (val) {
        //         if (val.pageSize > 10) {
        //             this.bottomSetting = false
        //         } else {
        //             this.bottomSetting = true
        //         }
        //     },
        //     deep: true
        // }
    },
    components: {
        ComPagination,
        COMTopStep,
        ComListButtonState
        // ComMaskAdd
    },
    created () {
        this.tenderApplyListByEntity()
    },
    mounted () {
        // table动态高度
        vueDom(
            () => {
                this.tableHeight = document.body.clientHeight - 240
            },
            () => {
                return $('table').length !== 0
            }
        )
        this.fn = () => {
            this.tableHeight = document.body.clientHeight - 240
        }
        window.onresize = debounce(this.fn)
    },
    methods: {
        ...mapMutations(['setAuditParams', 'setSelectedInfo']),
        fuzzySearch () {
            console.log('test')
        },
        onAdvanceSearch () {
            advanceSearch('/tenderBidAdSearchDialog').then(res => {
                // this.setSelectedInfo(res)
                // openAppClient('/showSelectedData', '选择结果', function () {})
                // this.pagination.advanced = res
                this.tenderApplyListByEntity(res)
            })
        },
        // hrOrgGetOrgByUserId () {
        //     orgRequest
        //         .hrOrgGetOrgByUserId({
        //             userId
        //         })
        //         .then(res => {
        //             res
        //             this.$store.commit('setUserInfo', { orgInfo: res[0] })
        //         })
        // },
        // async getCurrentUnitInfo (billId) {
        //     const auditParams = {
        //         billId,
        //         billType: 6021,
        //         freeNextUnitIndex: 0,
        //         freeNextUser: '',
        //         isPass: true,
        //         isShareInAudit: true,
        //         opinion: ''
        //     }
        //     let auditState = {}
        //     await auditRequest.getCurrentUnitInfo(auditParams).then(res => {
        //         auditState = res
        //     })
        //     return auditState.canModify
        // },
        // eslint-disable-next-line no-unused-vars
        async cellClick (row, column, cell, event) {
            if (column.label === '招标编号' || column.label === '拟招标项目名称') {
                // 判断编辑、查看
                // if (await this.getCurrentUnitInfo(row.billId)) {
                //     this.$router.push({
                //         path: './biddingApplicationEdit',
                //         query: { billid: row.billId }
                //     })
                // } else {
                //     this.$router.push({
                //         path: './biddingApplicationShow',
                //         query: { tenderId: row.billId }
                //     })
                // }
                this.$router.push({
                    path: './biddingApplicationEdit',
                    query: { billid: row.billId }
                })
            }
        },
        // iconMouseover (id, type) {
        //     this.iconActiveColor.id = id
        //     this.iconActiveColor.type = type
        // },
        // iconMouseleave () {
        //     this.iconActiveColor.id = {
        //         id: '',
        //         type: ''
        //     }
        // },
        // editData (tenderId) {
        //     this.$router.push({
        //         path: './biddingApplicationEdit',
        //         query: { billid: tenderId }
        //     })
        // },
        async tenderApplyListByEntity (params = {}) {
            const { pageSize: limit, currentPage: page } = this.pagination
            // this.setSelectedInfo({
            //     limit,
            //     page,
            //     ...params
            // })
            // openAppClient('/showSelectedData', '选择结果', function () {})
            await applyRequest
                .tenderApplyListByEntity({
                    limit,
                    page,
                    ...params
                })
                .then(res => {
                    if (res.list.length === 0) {
                        this.$set(this.pagination, 'noData', true)
                        return
                    }
                    this.tableData = res.list
                    this.pagination.total = res.totalCount
                    this.getButtonState()
                })
        },
        getButtonState () {
            // 循环出按钮状态
            this.tableData.forEach(async (item, index) => {
                this.$set(
                    this.tableData[index],
                    'buttonState',
                    await applyRequest.getButtonState({
                        billId: item.billId,
                        type: 1
                    })
                )
                // 如果循坏的行有按钮状态，则显示操作
                Object.values(item.buttonState).forEach(item2 => {
                    if (item2 === true) {
                        this.buttonsState = true
                    }
                })
            })
        },
        // eslint-disable-next-line no-unused-vars
        formatter (row, column, cellValue, index) {
            if (column.label === '招标方式') {
                return this.options.tenderForm.map(item => {
                    if (item.value === cellValue) {
                        return item.label
                    }
                })
            } else if (column.label === '招标类型') {
                return this.options.tenderType.map(item => {
                    if (item.key === cellValue) {
                        return item.value
                    }
                })
            } else if (column.label === '招标状态') {
                return this.options.tenderState.map((item, index) => {
                    if (index === cellValue) {
                        return item
                    }
                })
            }
        },
        openAddDialog () {
            this.$router.push('./biddingApplicationAdd')
            // this.$refs.ComMaskAdd.getVuexData()
            // this.$refs.ComMaskAdd.dialogVisible = true
        },
        cellClsNm ({ column }) {
            if (column.label === '') {
                return 'fixed-left'
            }
        },
        cellMouseEnter (row) {
            this.MouseEnterId = row.billId
        },
        cellMouseLeave () {
            this.MouseEnterId = 0
        }
    }
}
</script>

<style lang="scss" scoped>
.e-table {
    min-height: 97.3vh;
}
// .operation{
//   height:10px;
// }
</style>
